<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item label="一级分类">
        <el-select 
          v-model="subjectParentId"
          placeholder="课程分类" 
          @change="subjectLevelOneChanged">
          <el-option 
          v-for="subject in subjectOneList"
          :key="subject.id"
          :label="subject.title"
          :value="subject.id"></el-option>
          <el-option value="subjectParentAdd">
            <span class="el-option-span">新增一级分类</span>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="二级分类">
        <el-input v-model="subjectTitle" placeholder="二级课程分类名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加二级课程分类</el-button>
      </el-form-item>
    </el-form>
  </div>
  
</template>
<script>
  import subjectApi from '@/api/edu/subject'
  export default {
    data() {
      return {
        subjectParentId:'',//一级分类id
        subjectTitle:'',//二级分类名称
        subjectOneList:[],//一级分类
      }
    },
    created(){
        this.getAllSubject()

    },
    methods: {
      onSubmit() {
        if(this.subjectParentId == ''){
          this.$message({
            message: '请先选择相应的一级课程分类',
            type: 'warning'
          });
        }else{
          subjectApi.addTwoSubject(this.subjectParentId,this.subjectTitle)
            .then(res => {
              if(res.code != 20000){
                this.$message({
                  message: '添加错误',
                  type: 'warning'
                });
              }else{
                this.$message({
                  message: '添加成功'+this.subjectTitle,
                  type: 'success'
                });
                this.$router.replace('/subject/list');
              }
            })
        }
      },
      getAllSubject(){
        subjectApi.getSubjectList()
          .then(response => {
              //2 获取所有一级分类
              this.subjectOneList = response.data.list
              this.subjectParentId = this.subjectOneList[0].id
            })
      },
      subjectLevelOneChanged(value){
        this.subjectParentId = ''
        if(value == 'subjectParentAdd'){
          this.open();
        }else{
          this.subjectParentId = value;
          this.subjectTwoList = this.subjectOneList.filter(data => {
            if(data.id == value){
              return true;
            }
          })[0].children;
        }
      },
      open() {
        this.$prompt('请输入一级分类名称', '新增一级分类', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputErrorMessage: '名称不正确'
        }).then(({ value }) => {
          subjectApi.addOneSubject(value)
            .then(res => {//成功添加
              this.$message({
                type: 'success',
                message: '成功添加一级分类: ' + value
              });
              this.getAllSubject();
              this.$router.replace('/subject/save');
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }
    }
  }
</script>